HTML - tutorial - 26 - SVG - font elements

revision:


The base for defining an SVG font is the <font> element.

There are some ingredients required for embedding a font in SVG.

<font>

the <font> element bears an "id" attribute, to enable it to be referenced via a URI. It defines a font to be used for text layout.

Deprecated; no longer recommended.

Attributes: horiz-origin-x, horiz-origin-y, horiz-adv-x, vert-origin-x, vert-origin-y

<font-face>

The<font-face> element is the SVG equivalent of the CSS @font-face declaration. It defines a font's outer properties.

It defines basic properties of the final font such as weight, style, etc.

Deprecated - not longer recommended

Attributes: font-family, font-weight, font-style, font-variant, font-stretch, font-size, unicode-range, units-per-em, etc.

<font-face-format>

It describes the type of font referenced by its parent <font-face-uri>.

Deprecated - no longer recommended

Attributes: string

<font-face-name>

It points to a locally installed copy of this font, identified by its name.

Deprecated - no longer recommended

Attributes: name

<font-face-src>

The <font-face-src> element corresponds to CSS' "src" descriptor in @font-face declarations.

It serves as container for <font-face-name>, pointing to locally installed copies of this font, and <font-face-uri>, utilizing remotely defined fonts.

Deprecated - no longer recommended

Attributes: global attributes

<font-face-uri>

It points to a remote definition of the current font.

Deprecated - no longer recommended

attributes: xlink:href

<hkern>

It allows to fine-tweak the horizontal distance between two glyphs. This process is known as "kerning".

Deprecated - no longer recommended.

Attributes: u1, g1, u2, g2, k

<vkern>

It allows to fine-tweak the vertical distance between two glyphs in top-to-bottom fonts. This process is known as "kerning".

Deprecated - no longer recommended.

Attributes: u1, g1, u2, g2, k